import React, { Component } from 'react'
// import {getGoodDetail} from '../../data/api'
import { getGoodDetailAction } from '../../store/action/goodDetailAction'
import store from '../../store'
import axios from '../../myaxios/myaxios'
import { connect } from 'react-redux';
import { NavBar, Icon, Carousel } from 'antd-mobile'
import "./GoodDetail.scss"
// import goodDetailReducer from '../../store/reducer/goodDetailReducer';
class GoodDetail extends Component {
  state = {
    imgHeight: 176,
    is_collect: false
  }

  componentDidMount() {
    console.log(this.props);
    let goods_id = this.props.location.search.split("=")[1]
    console.log(goods_id);
    store.dispatch(getGoodDetailAction({ goods_id }))
    //初始化收藏按钮
    this.init_collect(goods_id);
  }
  //初始化收藏状态
  init_collect = (goods_id) => {
    let collections = JSON.parse(localStorage.getItem("collectiona") || "[]")
    let index = collections.findIndex((v) => {
      if (v.goods_id == goods_id) {
        return true
      }
    })
    if (index != -1) {
      this.setState({
        is_collect: true
      })
    }
  }
  handleCollect = (goodDetail) => {
    //a.a获取本地收藏产品的信息
    let collections = JSON.parse(localStorage.getItem("collectiona") || "[]")
    let index = collections.findIndex(v => {
      if (v.goods_id == goodDetail.goods_id) {
        return true
      }
    })
    if (index === -1) {
      collections.push(goodDetail)
      this.setState({
        is_collect: true
      })
    } else {
      collections.splice(index, 1)
      this.setState({
        is_collect: false
      })
    }
    localStorage.setItem("collections", JSON.stringify(collections))
  }

  render() {
    let goodDetail = this.props.goodDetail || {};
    return (
      <div className="ZffGooDetail">
        <NavBar
          onLeftClick={() => {
            this.props.history.go(-1)
          }
          }
          icon={<Icon type="left" />}
        >
          商品详情
        </NavBar>
        {/* 轮播图 */}
        <div className="zffGDSwiper">
          <Carousel
            autoplay
            dots
            infinite>
            {goodDetail.pics && goodDetail.pics.map((val, index) => (
              <div className="gdSwiperItem"
                key={val.pics_id}
                style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
              >
                <img
                  src={val.pics_mid}
                  alt=""
                  style={{ width: '100%', verticalAlign: 'top' }}
                  onLoad={() => {
                    // fire window resize event to change height
                    window.dispatchEvent(new Event('resize'));
                    this.setState({ imgHeight: 'auto' });
                  }}
                />
              </div>
            ))}
          </Carousel>
        </div>
        {/* 轮播图结束 */}
        {/* 收藏开始 */}
        <div className="zffGDCollect">
          <div className="collectLeft">
            $ {goodDetail.goods_price}
          </div>
          <div className="collectRight">
            <i className="iconfont icon-fenxiang"></i>
            <i className={this.state.is_collect ? "iconfont icon-star active" : "iconfont icon-star"} onClick={this.handleCollect.bind(this, this.props.goodDetail)}></i>
          </div>
        </div>
        {/* 收藏开始 */}
        {/* 详情开始 */}
        <div className="zffGDTitle">
          {goodDetail.goods_name}
        </div>
        {/* 详情结束 */}
        {/* 图文详情开始 */}
        <div className="zffIntroduce">
          <span className="title">图文详情</span>
          <div dangerouslySetInnerHTML={{ __html: goodDetail.goods_introduce }}></div>
        </div>
        {/* 图文详情结束 */}
        {/* 底部工具栏开始 */}
        <div className="zffGDBottom">
          <div className="bottomcontact">
            <i className="iconfont icon-kefu"></i>
            <div className="title">联系商家</div>
          </div>
          <div className="bottonCart">
            <i className="iconfont icon-gouwuche1"></i>
            <div className="title">购物车</div>
          </div>
          <div className="bottomAdd">加入购物车</div>
          <div className="bottomBuy">立即购买</div>
        </div>
        {/* 底部工具栏结束 */}
      </div>
    )
  }
}
const mapStateToProps = (state) => {
  return {
    goodDetail: state.goodDetailReducer.goodDetail
  };
}
export default connect(mapStateToProps, null)(GoodDetail);
